@import '@/style/imports';

.page-distribution-shop-goods {
  background: $color-bg-gray;
  /*  #ifdef  h5  */
  // padding-top: $navigate-height-h5;
  /*  #endif  */
  .sp-page-body {
    height: calc(100vh - 92px);
  }
  .at-modal__content {
    min-height: 0;

    .at-input {
      margin-bottom: 0;
    }

    .at-input:after {
      border-color: #21b991;
    }
  }

  .at-modal__footer .at-modal__action>button:last-child {
    color: #21b991;
  }

  .goods-tabs:nth-child(1) {
    margin-top: 16px;
  }

  .goods-tabs {
    position: relative;
    // z-index: 100;
    display: flex;
    background-color: #fff;
    align-items: center;
    padding: 10px 28px 0;

    .search-input__focus.without-dialog {
      position: relative;
      padding: 0;
    }

    .goods-tabs_shelves {
      color: #666666;
      font-size: 24px;
      white-space: nowrap;
      margin-left: 16px;
    }

    .goods-tabs_shelves_act {
      color: #21b991;
    }

    .goods-list__tabs {
      flex: 1;
    }

    .goods-tabs_but {
      width: 130px;
      font-size: 26px;
      line-height: 40px;
      height: 40px;
      background-color: #21b991;
      padding: 0;
      border-radius: 10px;
      color: #fff;
      margin-left: 10px;
    }

    .goods-tabs_but:active {
      opacity: 0.8;
    }
  }

  .at-search-bar__action {
    display: none;
  }

  .goods-list {
    padding: 0px $edge-margin;

    &__toolbar {
      position: fixed;
      top: 0;
      /*  #ifdef  h5  */
      top: $navigate-height-h5;
      /*  #endif  */
      left: 0;
      width: 100%;
      z-index: $z-index-toolbar;
      background: #fff;
      box-shadow: $box-shadow;

      &-title {
        width: 60%;
        margin: 0 auto;
        height: 84px;
        line-height: 84px;
        text-align: center;

        .at-divider {
          height: 84px;
        }
      }
    }

    &__tabs {
      display: flex;

      .filter-bar__item {
        flex: 1;
        text-align: center;
        color: #666666;
        font-size: 26px;

        [class^='icon'] {
          color: #ccc;
          display: inline-block;
        }
      }

      .filter-bar__item-active {
        color: $color-brand-primary;
      }
    }

    &__scroll {
      // 140
      @include page-scroll(76px + 110px + 30px, $tabbar-height);
      /*  #ifdef  h5  */
      top: 92px+76px + 110px +20px // $tabs-height + $navigate-height-h5 + $searchbar-height,
        /*  #endif  */
    }

    &__type-grid {
      @include clearfix();

      .goods-item {
        width: 48%;
        float: left;
        overflow: hidden;
        margin-left: 1%;
        margin-right: 1%;

        &__img {
          width: 100%;
          height: 100%;
          position: absolute;
          left: 0;
          top: 0;

          &-wrap {
            width: 100%;
            height: auto;
            position: relative;

            &:after {
              content: '';
              display: flex;
              padding-top: 100%;
            }
          }
        }

        &__cont {
          padding-left: floor($edge-size / 2);
          padding-right: floor($edge-size / 2);
        }

        &__bd {
          flex-direction: column;
          flex: 1;
        }

        &__cont {
          height: 210px;
        }
      }
    }
  }

  .drawer-item {
    padding: 10px 22px 10px 12px;
    margin-bottom: 30px;

    &__title {
      display: flex;
      justify-content: space-between;
      font-size: 24px;
      color: #555555;
      margin-bottom: 25px;
    }

    &__options {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;

      &__item {
        width: 172px;
        height: 88px;
        line-height: 88px;
        text-align: center;
        color: #555555;
        background-color: #f6f6f6;
        margin-bottom: 12px;
        font-size: 26px;
      }

      &__checked {
        background-color: $color-brand-primary;
        color: #ffffff;
      }

      &__none {
        width: 172px;
        height: 0;
      }
    }
  }

  .drawer-footer {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 100%;

    &__btn {
      width: 50%;
      display: inline-block;
      height: 87px;
      line-height: 87px;
      text-align: center;
      background-color: #fafafa;

      &_active {
        background: $color-brand-primary;
        color: #ffffff;
      }
    }
  }
}